<template>
  <div>编号 <input type="text" v-model="id" :readonly="flag=='修改'">
  姓名 <input type="text" v-model="name">
  <button @click="save">{{flag}}</button>
  </div>
<table>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  <tr v-for="(item,index) in list":key="index">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>
      <button @click="update(index)">修改</button>
      <button @click="del(index)">删除</button>
    </td>
  </tr>
</table>
</template>

<script lang="ts" setup>
import {ref} from "vue"
const list=ref([
  {id:'1',name:'万平'},
  {id:'2',name:'李翔'},
  {id:'3',name:'朱志豪'},
])
const id=ref('')
 const name=ref('')
const flag=ref('添加')

const save=()=>{
  if (flag.value=='添加'){
    if (id.value==''){
      alert('id不能为空')
      return
    }
    if(parseInt(id.value)<=0){
      alert("id不能为负数")
      return;
    }
    //NaN not a Number 不是一个数字
    if (isNaN(parseInt(id.value))){
      alert("id不为数字")
      return;
    }
    if (name.value==''){
      alert("name不能为空")
      return;
    }
    let found=false;
    list.value.some(item=>{
      if (item.id==id.value){
        found=true;
      }
    })
    if (found){
      alert("id已存在")
      return;
    }
    //向数组添记录
    list.value.push({id:id.value,name: name.value})
    claerData();
  }
  else if (flag.value=='修改'){
    list.value.some(item=>{
      if (item.id==id.value){
        item.name=name.value
        flag.value='添加'
      }
    })
  }
}
const update=(index:number)=>{
  id.value=list.value[index].id
  name.value=list.value[index].name
  flag.value='修改';
}
const claerData=()=>{
  id.value=''
  name.value=''
}
//根据索引删除数据
const del=(index:number)=>{
  if (confirm("确定删除吗?"))
    list.value.splice(index,1)
}
</script>
<style>
</style>